import {ChangeDetectionStrategy, Component,
  Inject, InjectionToken, OnInit, ViewEncapsulation,
  HostBinding
} from '@angular/core';
import {BehaviorSubject} from "rxjs";

export const S2S_ETD_DETAIL = new InjectionToken<any>('S2S_ETD_DETAIL')

@Component({
  selector: 'app-panel',
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class='panel-header-bar'>
      <span class="panel-title">ETD DETAIL</span>
      <svg class="panel-close-icon" (click)="panelClose()"  viewBox="0 0 100 100">
        <line x1="15" y1="50" x2="85" y2="50" stroke="#fff" stroke-width="8"></line>
        <line x1="50" y1="15" x2="50" y2="85" stroke="#fff" stroke-width="8"></line>
      </svg>
    </div>
  `,
  styles: [
    `

      .panel-header-bar {
        position: relative;
        min-height: 30px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        color: #fff;
        background-color: #546e95;
        padding: 3px 10px;
        border-radius: 6px 6px 0 0;
      }

      svg.panel-close-icon {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        border-radius: 50%;
        transition: .3s;
      }

      .panel-header-bar:hover > svg.panel-close-icon {
        background-color: #6d92c7;
      }

      svg.panel-close-icon line {
        transform: rotate(45deg);
        transform-origin: center;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PanelComponent implements OnInit {
  static isOpen$: BehaviorSubject<boolean>;

  @HostBinding('class') hostClass = 'panel-host'
  constructor(
    @Inject(S2S_ETD_DETAIL) public s2sEtdData
  ) {
    console.log(s2sEtdData)
  }

  panelClose () {
    const { isOpen$ } = PanelComponent;
    isOpen$.next(false);
  }

  ngOnInit(): void {

  }

}
